<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="7" :lg="7" :md="8" :sm="24">
            <a-form-item label="所属项目">
              <a-select placeholder="搜索下拉" show-search v-model="queryParam.projectId" option-filter-prop="children"
                :filter-option="filterOption" @search="handleChange('1', $event)" @change="onchanges">
                <a-select-option :value="item.id" v-for="item in projectNameList"
                  :key="item.id">{{ item.projectName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="7" :lg="7" :md="8" :sm="24">
            <a-form-item label="文件夹名称">
              <a-select placeholder="搜索下拉" show-search v-model="queryParam.id" option-filter-prop="children"
                :filter-option="filterOption" @search="handleChange('2', $event)">
                <a-select-option :value="item.id" v-for="item in busFolderplist"
                  :key="item.id">{{ item.folderName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="7" :lg="7" :md="8" :sm="24">
              <a-form-item label="创建时间">
                <a-range-picker v-model="queryParam.Range" format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
                  @change="onBirthdayChange" />
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset('1')" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" :click="compute" type="primary">新建文件夹</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />批量删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <div id="container">
                <div id="left">
                    <a-tree :tree-data="treeData" :replace-fields="fieldNames" @select="onSelect">
                      </a-tree>
                  </div>
                <div id="right">
          <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
            :pagination="ipagination" :loading="loading" class="j-table-force-nowrap" @change="handleTableChange">
            <span slot="action" slot-scope="text, record">
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                <a>删除</a>
              </a-popconfirm>
              <a-divider type="vertical" />
              <a @click="handleEdit(record)">修改</a>

              <a-divider type="vertical" />
              <a-dropdown>
                <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a @click="detail(record)">详情</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="detailFormOk(record, '2')">分享</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </span>
          </a-table>
        </div>
      </div>
    </div>


    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <Flode-modal ref="modalForm" @ok="modalFormOk" :busFolderVo="busFolderVo" @showTree="showTree"></Flode-modal>
    <FlodedetailModal ref="detailForm" @ok="detailFormOk" ></FlodedetailModal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import FlodeModal from './modules/FlodeModal'
import FlodedetailModal from './modules/FlodedetailModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { downLodaImg, getAction, deleteAction } from '@/api/manage'
export default {
  name: 'BusTreviRiverPcList',
  mixins: [JeecgListMixin],
  components: {
    FlodeModal,
    FlodedetailModal,
  },
  data() {
    return {
      description: '文件夹管理',
      // 表头
      columns: [
        {
          title: '文件夹名称',
          align: 'center',
          dataIndex: 'folderName',
        },
        {
          title: '所属项目',
          align: 'center',
          dataIndex: 'projectName',
        },
        {
          title: '文件数量(个)',
          align: 'center',
          dataIndex: 'fileNumber',
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createdDate',
        },
        {
          title: '创建人',
          align: 'center',
          dataIndex: 'creator',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: `/bus/busFolder/list?creator=${localStorage.getItem('userid')}`,
        delete: '/bus/busFolder/delete',
        deleteBatch: '/sensitiveWord/busSensitiveWord/deleteBatch',
        pjtselect: '/bus/busProject/projectNameList', //所有项目
        busFolder: '/bus/busFolder/folderNameList', //所属文件夹
        showTreeList: '/bus/busProject/treeList', //树形结构
        folderList: '/bus/busFolder/treePageList', //通过文件夹id或者项目id查询文件夹列表
        determineById: '/bus/busFolder/determine', //通过文件夹id查询文件夹
      },
      projectNameList: [],
      busFolderplist: [],
      treeData: [],
      temp: [],
      fieldNames: { children: 'children', title: 'title', key: 'id' },
      dataSource: [],
      busFolderVo: [],
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  mounted() {
    this.porjectselect()
    this.folderNameList()
    this.showTree()
  },

  methods: {
    //展示树结构
    showTree() {
      //请求树形结构
      //请求参数
      getAction(this.url.showTreeList).then((res) => {
        if (res.success) {
          this.temp.push(JSON.stringify(res.result.records))

          //遍历temp数组
          for (let i = 0; i < this.temp.length; i++) {
            //将字符串转换为数组
            this.treeData = JSON.parse(this.temp[i])
          }
        }
      })
    },
    onSelect(checkedKeys) {
      this.$children[0].$children[4].model = {}
      //请求后端查看文件夹
      this.folderList(checkedKeys)
      //进行计算具体值
      this.determine(checkedKeys)
    },
    folderList(checkedKeys) {
      this.$children[0].$children[4].treechange(checkedKeys[0])
      const httpurl = this.url.folderList
      const key = checkedKeys[0]
      const params = {
        id: key,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
      }
      getAction(httpurl, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
          this.ipagination.size = res.result.size
          this.ipagination.current = res.result.current
        }
      })
    },
    //根据id计算是文件夹还是项目
    determine(checkedKeys) {
      const httpurl = this.url.determineById
      const params = {
        id: checkedKeys[0],
      }
      getAction(httpurl, params).then((res) => {
        this.busFolderVo = res.result
        let type = 'type'
        this.$nextTick(() => {
          this.$children[0].$children[4].derplist(res.result.projectId, type)
          this.$refs.modalForm.setValue(this.busFolderVo)
        })
      })
    },
    //查询时间
    onBirthdayChange(value, dateString) {
      this.queryParam.startDate = dateString[0]
      this.queryParam.endDate = dateString[1]
    },
    //所属项目
    porjectselect(name) {
      const httpurl = this.url.pjtselect
      const params = {
        projectNidame: name,
      }
      getAction(httpurl, params).then((res) => {
        this.projectNameList = res.result
      })
    },
    //文件夹名称
    folderNameList(name, type) {
      const httpurl = this.url.busFolder
      let params
      if (type == 'type') {
        params = {
          projectId: name,
        }
      } else {
        params = {
          folderName: name,
        }
      }

      getAction(httpurl, params).then((res) => {
        this.busFolderplist = res.result
      })
    },
    compute() {
      console.log('计算值')
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    handleChange(type, e) {
      if (type == 1) {
        this.porjectselect(e)
      } else if (type == 2) {
        this.folderNameList(e)
      }
    },
    //所有项目进行选择事件
    onchanges(e) {
      this.folderNameList(e, 'type')
    },
    // 删除
    handleDelete(id) {
      const httpurl = this.url.delete
      const params = {
        id: id,
      }
      deleteAction(httpurl, params).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //分享
    detail(record) {
      this.$router.push({ path: `/resourcesys/Sharedetail?ids=${record.id}` })
    },
  },
}
</script>
<style scoped lang="less">
#container {
  width: 100%;
  margin: 1 auto;
}

#left {
  width: 13%;
  height: 600px;
  float: left;
}

#right {
  width: 87%;
  height: 600px;
  float: right;
}

/deep/.ant-tree {
  overflow-x: auto;
}

@import '~@assets/less/common.less';
</style>
